import React, { useState } from 'react';
import { history } from 'umi';
import { Table, Button } from 'antd';
import type { ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import InformationModal from '@/components/InformationModal';
import styles from '../index.less';

export type Position = {
  avatar: string;
  realName: string;
  nickName: string;
  email: string;
  outUserNo: string;
  phone: string;
  permission?: string[];
};

export type RoleMapType = Record<
  string,
  {
    name: string;
    desc: string;
  }
>;

const tableListDataSource: Position[] = [];

const realNames = ['马巴巴', '测试', '测试2', '测试3'];
const nickNames = ['巴巴', '测试', '测试2', '测试3'];
const emails = ['baba@antfin.com', 'test@antfin.com', 'test2@antfin.com', 'test3@antfin.com'];
const phones = ['12345678910', '10923456789', '109654446789', '109223346789'];
const permissions = [[], ['权限点名称1', '权限点名称4'], ['权限点名称1'], []];

for (let i = 0; i < 5; i += 1) {
  tableListDataSource.push({
    outUserNo: `${102047 + i}`,
    avatar: 'https://gw.alipayobjects.com/zos/antfincdn/upvrAjAPQX/Logo_Tech%252520UI.svg',
    realName: realNames[i % 4],
    nickName: nickNames[i % 4],
    email: emails[i % 4],
    phone: phones[i % 4],
    permission: permissions[i % 4],
  });
}

const renderContent = (order: {} | null | undefined, text: {} | null | undefined) => {
  return (
    <div className={styles.content}>
      <div className={styles.top}>
        {text}：{order}
      </div>
      {text === '职位名称' ? (
        <div className={styles.bottom}>
          接收简历：{5}&nbsp; 已筛选：{'3/5'}&nbsp; 已面试：{1}&nbsp; 已发offer：{1}&nbsp; 已入职：
          {1}
        </div>
      ) : (
        <div className={styles.bottom} style={{ width: 'auto' }}>
          &nbsp;
        </div>
      )}
    </div>
  );
};

const PauseList: React.FC = () => {
  const [visible, setVisible] = useState(false);
  const [confirmLoading, setConfirmLoading] = useState(false);
  const [modalText, setModalText] = useState('');

  const showModal = (num: number) => {
    if (num === 1)
      setModalText(
        '您确定开启职位招聘吗？开启后，可于在招职位中查看及处理职位下的简历，可发起offer审批及发送offer。',
      );
    if (num === 2)
      setModalText('您确定关闭职位招聘吗？关闭后，将无法查看职位信息及已投递该职位的简历。');
    setVisible(true);
  };

  const handleOk = () => {
    setConfirmLoading(true);
    setTimeout(() => {
      setVisible(false);
      setConfirmLoading(false);
    }, 1000);
  };

  const columns: ProColumns<Position>[] = [
    {
      dataIndex: 'nickName',
      title: '职位名称',
      width: 150,
      render: (text, record) => {
        return {
          children: renderContent(record.nickName, '职位名称'),
          props: {
            colSpan: 2,
          },
        };
      },
    },
    {
      dataIndex: 'email',
      title: '招聘负责人',
      render: (text, record) => {
        return {
          children: renderContent(record.email, '招聘负责人'),
          props: {
            colSpan: 1,
          },
        };
      },
    },
    {
      dataIndex: 'phone',
      title: 'HC',
      render: (text, record) => {
        return {
          children: renderContent(record.phone, 'HC'),
          props: {
            colSpan: 1,
          },
        };
      },
    },
    {
      dataIndex: 'role',
      title: '发布时间',
      render: (text, record) => {
        return {
          children: renderContent('2021-9-3', '发布时间'),
          props: {
            colSpan: 1,
          },
        };
      },
    },
    {
      dataIndex: 'permission',
      title: '预计停止',
      render: (text, record) => {
        return {
          children: renderContent('2021-9-10', '预计停止'),
          props: {
            colSpan: 1,
          },
        };
      },
    },
    {
      title: '操作',
      dataIndex: 'x',
      valueType: 'option',
      render: (text, record) => {
        return (
          <>
            <Button
              type="primary"
              className={styles.btn}
              size="small"
              onClick={(e) => {
                history.push({
                  pathname: '/recruitment/information/createposition',
                  query: { title: 'positionDetail' },
                });
                e.stopPropagation();
                e.nativeEvent.stopImmediatePropagation();
              }}
            >
              编辑
            </Button>
            <Button
              type="primary"
              ghost
              className={styles.btn}
              size="small"
              onClick={(e) => {
                showModal(1);
                e.stopPropagation();
                e.nativeEvent.stopImmediatePropagation();
              }}
            >
              开启
            </Button>
            <Button
              danger
              className={styles.btn}
              size="small"
              onClick={(e) => {
                showModal(2);
                e.stopPropagation();
                e.nativeEvent.stopImmediatePropagation();
              }}
            >
              关闭
            </Button>
          </>
        );
      },
    },
  ];

  return (
    <>
      <ProTable<Position>
        columns={columns}
        style={{cursor:'pointer' }}
        request={(params, sorter, filter) => {
          // 表单搜索项会从 params 传入，传递给后端接口。
          console.log(params, sorter, filter);
          return Promise.resolve({
            data: tableListDataSource,
            success: true,
          });
        }}
        onRow={(record) => {
          return {
            onClick: () => {
              history.push({
                pathname: '/recruitment/information/recruitmentDetail',
                query: { id: record.outUserNo, showBtn: 'false' },
              });
            }, // 点击行
          };
        }}
        rowSelection={{
          // 自定义选择项参考: https://ant.design/components/table-cn/#components-table-demo-row-selection-custom
          // 注释该行则默认不显示下拉选项
          selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
        }}
        rowKey="outUserNo"
        pagination={{
          showQuickJumper: true,
        }}
        showHeader={false}
        toolBarRender={false}
        search={false}
      />
      <InformationModal
        visible={visible}
        modalText={modalText}
        confirmLoading={confirmLoading}
        showModalBtn
        handleOk={() => handleOk()}
        onCancel={() => setVisible(false)}
      />
    </>
  );
};

export default PauseList;
